import { defineComponent, h, ref, inject } from 'vue'
import { storeToRefs } from 'pinia'
import { useFullscreen } from '@vueuse/core'
import { useAppsStore } from '@/stores/modules/app'
import { themesStore } from '@/stores/modules/theme'
import Theme from '../theme/index'
import { NIcon, NDropdown, NAvatar } from 'naive-ui'
import History from './history'
import navStyle from './styles/index.module.scss'
export default defineComponent({
  props: {
    width: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const useStore = useAppsStore()
    const themeRef = ref()
    const handTheme = () => {
      console.log(themeRef.value)
      themeRef.value.showEdit()
    }

    const theme = themesStore()
    const { getTopNavIsClose: isClose } = storeToRefs(theme)

    const { getUserInfo: userInfo } = storeToRefs(useStore)
    const { signOut } = useStore

    const isOpen: any = inject('isOpen')
    const isOpenChange: any = inject('isOpenChange')

    const { isFullscreen, toggle } = useFullscreen()

    const active = ref(false)
    const renderIcon = (icon: string) => {
      return () => {
        return h(NIcon, null, {
          default: () =>
            h('i', {
              class: ['esayIcon', icon]
            })
        })
      }
    }
    const options = [
      {
        label: '个人中心',
        key: 'user',
        icon: renderIcon('esayIcon-waixingren')
      },
      {
        label: '退出登录',
        key: 'logout',
        icon: renderIcon('esayIcon-tuichu')
      }
    ]
    const activeChange = (val: boolean) => {
      active.value = val
    }

    const handleSelect = (command: string) => {
      if (command === 'logout') {
        signOut()
        handReload()
      }
    }
    const handReload = () => {
      location.reload()
    }

    const isShow = ref(false)
    if (!isClose.value) {
      isShow.value = true
    }
    let timer: any = null
    const handMouseover = () => {
      if (!isClose.value) return
      if (timer) {
        clearTimeout(timer)
      }
      if (isShow.value) return
      isShow.value = true
    }
    const handMouseout = () => {
      if (!isClose.value) return
      if (!isShow.value) return
      timer = setTimeout(() => {
        isShow.value = false
      }, 500)
    }
    return () => (
      <>
        <div class={` ${navStyle.navBar}`}>
          <div
            class={`nav ${isShow.value ? 'nav-open' : ''}`}
            onMouseenter={handMouseover}
            onMouseleave={handMouseout}
          >
            <div class='nav-top'>
              <div class='nav-main'>
                <div class='nav-left'>
                  <div class='nav-left'>
                    <div class='open-icon' onClick={isOpenChange}>
                      <i
                        class={`esayIcon esayIcon-${
                          isOpen.value ? 'zhedie1' : 'zhankaicaidan'
                        }`}
                      ></i>
                    </div>
                    {props.width >= 900 && <History />}
                  </div>
                </div>
                <div class='nav-right'>
                  <div
                    class='full-screen press-down'
                    title={isFullscreen.value ? '退出全屏' : '全屏'}
                    onClick={toggle}
                  >
                    <i
                      class={`esayIcon ${
                        isFullscreen.value
                          ? 'esayIcon-tuichuquanping'
                          : 'esayIcon-quanping'
                      }`}
                    ></i>
                  </div>
                  <div
                    class='theme press-down'
                    title='主题'
                    onClick={handTheme}
                  >
                    <i
                      class='esayIcon esayIcon-43_zhuti'
                      style={{ fontSize: '25px' }}
                    ></i>
                  </div>
                  <div
                    class='refresh press-down'
                    title='刷新'
                    onClick={handReload}
                  >
                    <i class='esayIcon esayIcon-shuaxin'></i>
                  </div>
                  <div class='user'>
                    <NDropdown
                      trigger='hover'
                      options={options}
                      onUpdateShow={activeChange}
                      onSelect={handleSelect}
                    >
                      <span class='avatar-dropdown'>
                        <NAvatar round size={35} src={userInfo.value.photo} />
                        <div class='user-name'>
                          <span>{userInfo.value.managerName}</span>
                        </div>
                        <i
                          class={`esayIcon esayIcon-xiangxia2 ${
                            active.value ? 'rotage' : ''
                          }`}
                        ></i>
                      </span>
                    </NDropdown>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <Theme ref={themeRef} />
      </>
    )
  }
})
